<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

  <label for="male">
    <input type="radio" id="male"  value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female"  value="女" v-model="sex">女
  </label>
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <button :disabled="!isAgree">下一步</button>
  <h2>{{sex}},{{isAgree}}</h2>
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="排球" v-model="hobbies">排球
  <h2>爱好:{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el:'#app',
    data:{
      message:'123',
      name:'321',
      sex:'男',
      isAgree:false,
      hobbies:[]
    }
  })
</script>
</body>
</html>